<template>
  <div class="container" @wheel="handlePageChange">
    <tiny-row class="header row-item" :flex="true">
      <tiny-col :span="12">
        <div class="tag-list">
          <tiny-tag
              :hit="false"
              size="medium"
              type="info"
              v-for="tag in mainTagList"
              :key="tag.id"
              style="margin: 0 0 10px 10px;"
              @click="handleTag(tag.id)"
          >
            {{ tag.name }}
          </tiny-tag>
        </div>
        <tiny-collapse>
          <tiny-collapse-item title="查看更多" name="1">
            <tiny-tag
                :hit="false"
                size="medium"
                type="info"
                v-for="tag in otherTagList"
                :key="tag.id"
                style="margin: 0 0 10px 10px;"
                @click="handleTag(tag.id)"
            >
              {{ tag.name }}
            </tiny-tag>
          </tiny-collapse-item>
        </tiny-collapse>
      </tiny-col>
    </tiny-row>
    <tiny-row class="main row-item" :flex="true">
      <tiny-col :span="8">
        <ContentList/>
      </tiny-col>
      <tiny-col :span="4" class="recommendCol">
        <div class="col recommend">
          <div class="card">·
            <div class="card2">
              <div class="header">
                <span style="margin:8px 0 0 12px;font-weight:bold;font-size:20px;">热门排行</span>
              </div>
              <hr style="border-color: #f0f0f2"/>
              <div class="column-list" v-for="rank in rankList" :key="rank.id">
                <div class="left" style="display: flex;align-items: center">
                  <span @click="toArticleDetail(rank.id)" v-if="rank.title.length > 10">{{
                      rank.title.substring(0, 10)
                    }}...</span>
                  <span @click="toArticleDetail(rank.id)" v-else>{{ rank.title }}</span>
                </div>
                <right theme="filled" size="20" fill="#333" :strokeWidth="2" style="margin-right:12px;"/>
              </div>
            </div>
          </div>
        </div>
      </tiny-col>
    </tiny-row>
  </div>
</template>

<script setup>
import {
  Row as TinyRow,
  Col as TinyCol,
  Tag as TinyTag,
  Collapse as TinyCollapse,
  CollapseItem as TinyCollapseItem, Modal
} from '@opentiny/vue'
import {onMounted, onUnmounted, ref} from 'vue'
import ContentList from "../components/ContentList.vue";
import {Right} from '@icon-park/vue-next'
import request from "../utils/request.js";
import {useContentStore} from "../store/useContentStore.js";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
import {debounce} from "lodash";


document.title = '唯忆社区-博客'
const router = useRouter()
const contentStore = useContentStore()
const {contentList} = storeToRefs(contentStore)
// 29个父标签
const mainTagList = ref([])
const otherTagList = ref([])
const rankList = ref([])
const pageNum = ref(1)
const pageTotal = ref(0)
const pageSize = ref(1500000) // 暂不处理分页
const searchArticleParam = ref({
  title: '',
  type: 0,
  pageParam: {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  },
  parentTagId: 0
})


// todo 处理分页
// const handlePageChange = debounce((event) => {
//   if (event.deltaY > 0) {
//     // 判断是否还继续分页
//     console.log('total',pageTotal.value)
//     console.log('size',contentList.value.length)
//     if (contentList.value.length < pageTotal.value) {
//       pageNum.value++
//       request.post('/api/contents/articles/page', searchArticleParam.value).then(res => {
//         if (res.code === 1) {
//           contentList.value = [...contentList.value, ...res.data.records]
//         } else {
//           Modal.message({message: res.message, status: 'error'})
//         }
//       })
//     }else {
//       Modal.message({message: '已经到底了', status: 'warning',duration:1500})
//       return
//     }
//   }
//
// }, 100)
//
// onMounted(() => {
//   window.addEventListener('wheel', handlePageChange);
// });
//
// onUnmounted(() => {
//   window.removeEventListener('wheel', handlePageChange);
// });

// 跳转文章详细页
const toArticleDetail = articleId => {
  const {href} = router.resolve(`/article/detail/${articleId}`)
  window.open(href, '_blank')
}

// 查询热门排行文章列表
const queryHotArticleList = () => {
  request.get('/api/contents/articles/hotArticle')
      .then(res => {
        if (res.code === 1) {
          rankList.value = res.data
        } else {
          Modal.message({message: res.message, status: 'error'})
        }
      })
}
queryHotArticleList()

// 点击标签
const handleTag = (tagId) => {
  searchArticleParam.value.parentTagId = tagId
  queryArticleList()
}

// 查询文章列表
const queryArticleList = () => {
  request.post('/api/contents/articles/page', searchArticleParam.value)
      .then(res => {
        if (res.code === 1) {
          contentList.value = res.data.records
          pageTotal.value = res.data.total
        } else {
          Modal.message({message: res.message, status: 'error'})
        }
      })
}
queryArticleList()

// 查询父标签
const queryTagList = () => {
  request.get('/api/systems/tags/tree').then(res => {
    if (res.code === 1) {
      // 取前29个标签
      mainTagList.value = res.data.slice(0, 29)
      // 取剩下的标签
      otherTagList.value = res.data.slice(29)
    } else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryTagList()


</script>

<style lang="less" scoped>
.recommendCol {
  position: sticky;
  top: 0;
}

.recommend {
  .card {
    width: 80%;
    height: 450px;
    background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
    border-radius: 5px;
    transition: all .3s;
  }

  .card2 {
    .column-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0 0 12px;
      cursor: pointer;
    }

    .header {
      //display: flex;
      //justify-content: space-between;
      //align-items: center;
    }

    width: 100%;
    height: 450px;
    background-color: #fff;
    border-radius: 5px;
    transition: all .2s;
    border: 1px solid #ddd;
    margin-top: -21px;
  }

  .card2:hover {
    transform: scale(0.99);
    border-radius: 5px;
    border: 0;
  }

  .card:hover {
    box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
  }
}

.main {
  margin-top: 20px;
}

.tiny-tag {
  cursor: pointer;
}

.tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.row-item {
  width: 92.785%
}
</style>
